<template>
	<div class="detail">
		<myheader :title="title"></myheader>
		<swiper :imgs="imgdata"></swiper>
		
		<div class="produce1">
			<div class="pro1-left"><p>佛系社区</p><span>{{data.house_price}}元/月</span></div>
			<div class="pro1-right">随时入住</div>
		</div>
		<div class="produce2">
			<div class="pro2-one">月租</div>
			<div class="pro2-two">有阳台</div>
			<div class="pro2-three">免中介费</div>
			<div class="pro2-four">押一付一</div>
			<div class="pro2-five">开放厨房</div>
		</div>
		<div class="produce3">
			<div class="pro3-one">
				<div class="pro3one-left">户型：<span>{{data.house_type}}</span></div>
				<div class="pro3one-right">面积：<span>{{data.house_size}}㎡</span></div>
			</div>
			<div class="pro3-two">
				<div class="pro3two-left">朝向：<span>{{data.house_direction}}</span></div>
				<div class="pro3two-right">窗户类型：<span>{{data.house_wintype}}</span></div>
			</div>
		</div>
		
		<div class="consul">
			<div class="coleft"><img src="../../../static/lxb/oth1.png"/></div>
			<div class="colcenter">送超值礼包,人人有份,点击查看</div>
			<div class="coright"><img src="../../../static/lxb/nav.png"/></div>
		</div>
		<div class="produce4box">
		 <div class="produce4">
		 	<div class="pro4-one">房型验真编号：81256</div>
		 	<div class="pro4-two">真实房源,假一陪百元<span>></span></div>
		 	<div class="pro4-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">商家准入认证</div>
		 	</div>
		 	<div class="pro5-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">真房源管理系统</div>
		 	</div>
		 	<div class="pro5-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">举报合适 极速赔偿</div>
		 	</div>
		 </div>
		</div>
		
		
		<div class="hous-box">
			<div class="hou-title">
				<div class="htl-left">在租房间</div>
				<div class="htl-right">本房型共5间在租</div>
			</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="many">更多房间请点此咨询</div>
		<div class="tel-box">
			<div class="tel-left"><p>公寓管家:刘宝宝</p>租房问题随时联系我</div>
			<div class="tel-right">电话咨询</div>
		</div>
		<div class="map-title">位置及周边</div>
		<div class="map-box" id="map">
			
		</div>
		<div class="loca-one">
			<div class="locaone-left">{{data.house_des}}</div>
			<div class="locaone-right"><img src="../../../static/lxb/nav.png"/></div>
		</div>
		<div class="loca-two">{{data.house_des}}</div>
		<div class="waring">
			<div class="waring-left"><img src="../../../static/lxb/jubao.png"/>乌龟承诺真实房源假一陪百元！</div>
			<div class="waring-right">举报该房源</div>
		</div>
		<div class="loca-two1">户型编号：81256</div>
		<div class="contact-box" v-if="show">
			<div class="heart" @click="follow"><img src="../../../static/lxb/heart.png"/><p>{{follows}}</p></div>
			<div class="heart"><img src="../../../static/lxb/sign.png"/><p>签约</p></div>
			<div class="zxzu">在线咨询</div>
			<div class="zxzu">电话咨询</div>
		</div>
		<div class="news" @click="showContent" style="box-shadow: 0 0 10px darkgray; border:1px solid gainsboro">
			<img src="../../../static/lxb/im@2x.png" />
		</div>
		
	</div>
	
</template>

<script>
import myheader from '@/components/public/myheader';
import swiper from '@/components/public/swiper';
import BMap from 'BMap';
export default {
	name: 'mydetails',
	data() {
		return {
			follows:'关注',
			title: '',
			type: '',
			data: '',
			show: false,
			imgdata: '',
			userid:''
		};
	},
	mounted: function() {
		//判读是否登陆了
		if (
			localStorage.getItem('nameid') == null ||
			localStorage.getItem('nameid') == undefined ||
			localStorage.getItem('nameid') == ''
		) {
			this.$router.push({
				name: 'login'
			});
		} else {
			var _this = this;
			var house_id = _this.$route.query.id;
           _this.userid=house_id;
			var datax = {
				houseid: house_id
			};
			var datas={
				houseid: house_id
			}
			_this.axios.post(_this.ajaxUrl + '/api/details/upstate',_this.qs.stringify(datas)).then(function(ress){
				if(ress.data.house_id==null||ress.data.house_id==undefined||ress.data.house_id==""){
					_this.follows="关注";
				}
				else{
					_this.follows="已关注";
					}
			}).catch(function(err) {});
			_this.axios
				.post(_this.ajaxUrl + '/api/details/finds', _this.qs.stringify(datax))
				.then(function(res) {
					_this.data = res.data;
					_this.imgdata = [
						{
							url:
								'http://106.13.72.24:81/house/public/static/uploads/' + _this.data.img1
						},
						{
							url:
								'http://106.13.72.24:81/house/public/static/uploads/' + _this.data.img2
						},
						{
							url:
								'http://106.13.72.24:81/house/public/static/uploads/' + _this.data.img3
						},
						{
							url:
								'http://106.13.72.24:81/house/public/static/uploads/' + _this.data.img4
						},
						{
							url:
								'http://106.13.72.24:81/house/public/static/uploads/' + _this.data.img5
						}
					];
					var map = new BMap.Map('map');
					// 创建地图实例
					var point = new BMap.Point(_this.data.house_lontiude,_this.data.house_latiude);
					// 创建点坐标
					map.centerAndZoom(point, 15);
				})
				.catch(function(err) {});
		}
	},
	components: {
		myheader,
		swiper
	},
	methods: {
		showContent: function() {
			this.show = !this.show;
		},
		follow:function(){
			var _this=this;
			var usernameid=localStorage.getItem("nameid");
			if(_this.follows=="关注"){
				//添加关注
				var datax = {
					//房屋id
					houseid:_this.userid,
					//登陆id
					userid:usernameid			
				};
				console.log(_this.userid+"1");
				_this.axios.post(_this.ajaxUrl+'/api/user/followhouse',_this.qs.stringify(datax)).then(function(res){
					if(res.data.msg=="ok"){
						_this.follows="已关注";
					}
				}).catch(function(err){
					
				});
			}
			else{
				//删除
				var datax = {
					//房屋id
					houseid:_this.userid,
							
				};
				
				_this.axios.post(_this.ajaxUrl+'/api/user/followhousecrle',_this.qs.stringify(datax)).then(function(res){
					if(res.data.msg=="ok"){
						_this.follows="关注";
					}
				}).catch(function(err){
					
				});
			}
			
		}
	}
};
</script>

<style scoped="scoped">
.produce1 {
	width: 6.7rem;
	height: 0.9rem;
	margin: auto;
	margin-top: 0.4rem;
}
.pro1-left {
	width: 1.7rem;
	height: 0.9rem;
	float: left;
}
.pro1-left > p {
	font-size: 0.32rem;
	font-family: '黑体';
}
.pro1-left > span {
	font-size: 0.16rem;
	color: red;
}
.pro1-right {
	width: 1.3rem;
	height: 0.4rem;
	float: right;
	background: #e0eafe;
	text-align: center;
	line-height: 0.4rem;
	color: #3576f6;
	font-size: 0.12rem;
	border-radius: 0.1rem;
}
.produce2 {
	width: 6.7rem;
	height: 0.45rem;
	margin: auto;
	margin-top: 0.65rem;
}
.produce2 > div {
	float: left;
	background: #e0eafe;
	text-align: center;
	line-height: 0.45rem;
	font-size: 0.12rem;
	color: #3576f6;
	width: auto;
	height: 0.45rem;
	margin-left: 0.15rem;
}
.produce3 {
	width: 6.7rem;
	height: 1rem;
	margin: auto;
	margin-top: 0.3rem;
}
.pro3-one {
	width: 6rem;
	height: 0.4rem;
}
.pro3-two {
	width: 5rem;
	height: 0.4rem;
	margin-top: 0.2rem;
}
.pro3-one > div {
	float: left;
	height: 0.4rem;
	width: auto;
	color: #b6bac2;
	font-size: 0.32rem;
}
.pro3-one span {
	color: black;
	font-family: '黑体';
}
.pro3one-right {
	margin-left: 0.45rem;
}
.pro3-two > div {
	float: left;
	height: 0.4rem;
	width: auto;
	color: #b6bac2;
	font-size: 0.32rem;
}
.pro3-two span {
	color: black;
	font-family: '黑体';
}
.pro3two-right {
	margin-left: 1rem;
}
.consul {
	width: 6.65rem;
	height: 0.55rem;
	margin: auto;
	margin-top: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
	border-top: 1px solid #e5e5e5;
}
.coleft {
	width: 0.8rem;
	height: 0.45rem;
	float: left;
	margin-top: 0.05rem;
}
.coleft > img {
	width: 100%;
	height: 100%;
}
.colcenter {
	width: 4rem;
	height: 0.4rem;
	float: left;
	font-size: 0.1rem;
	margin-top: 0.05rem;
	text-align: center;
	line-height: 0.4rem;
}
.coright {
	width: 0.15rem;
	height: 0.3rem;
	float: right;
}
.coright > img {
	width: 100%;
	height: 100%;
	margin-top: 0.05rem;
}
.produce4box {
	width: 100%;
	height: 3.2rem;
	margin-top: 0.35rem;
	background: url(../../assets/yc/real_bg.png) center;
	background-size: 100%, 3.2rem;
}
.produce4box > img {
	width: 100%;
	height: 100%;
}
.produce4 {
	width: 6.65rem;
	height: 2.4rem;
	float: left;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
}
.pro4-one {
	width: 3rem;
	height: 0.4rem;
	font-size: 0.16rem;
	line-height: 0.4rem;
}
.pro4-two {
	width: 4rem;
	height: 0.45rem;
	font-size: 0.26rem;
	line-height: 0.45rem;
}
.pro4-two > span {
	color: gray;
}
.pro4-three {
	width: auto;
	height: 0.35rem;
	margin-top: 0.35rem;
	color: #8c929f;
}
.pro5-three {
	width: auto;
	height: 0.35rem;
	color: #8c929f;
}
.pro4three-left {
	width: 0.15rem;
	height: 0.15rem;
	float: left;
	border: 2px solid #838a98;
	margin-top: 0.05rem;
}
.pro4three-left > div {
	width: 0.1rem;
	height: 0.1rem;
	margin: auto;
	margin-top: 0.02rem;
	background: #838a98;
}
.pro4three-right {
	width: auto;
	height: 0.3rem;
	font-size: 0.12rem;
}
.fypro {
	width: 6.7rem;
	height: 0.4rem;
	margin: auto;
	font-size: 0.32rem;
	line-height: 0.4rem;
	margin-top: 0.45rem;
}
.detail-box {
	width: 6.7rem;
	height: 2.4rem;
	margin: auto;
	margin-top: 0.3rem;
}
.de-one {
	width: 100%;
	height: 0.9rem;

	display: flex;
	justify-content: space-around;
	color: #7f8693;
}
.de-one > div {
	width: 1rem;
	height: 0.9rem;

	font-size: 0.12rem;
	text-align: center;
}
.de-one img {
	width: 0.8rem;
	height: 0.4rem;
	text-align: center;
}
.de-two img {
	width: 0.8rem;
	height: 0.4rem;
}
.de-two > div {
	width: 1rem;
	height: 0.9rem;
	font-size: 0.12rem;
	color: #7f8693;
	text-align: center;
}
.de-two {
	width: 100%;
	height: 0.9rem;
	display: flex;
	justify-content: space-around;
	margin-top: 0.254rem;
}
.hous-box {
	width: 6.7rem;
	height: 1.2rem;
	margin: auto;
	margin-top: 0.4rem;
	border-top: 1px solid #e3e5ef;
}
.hou-title {
	width: 6.7rem;
	height: 0.4rem;
	margin-top: 0.45rem;
}
.htl-left {
	width: 1.8rem;
	height: 0.4rem;
	line-height: 0.4rem;
	float: left;
	text-align: center;
	font-size: 0.4rem;
}
.hde-left {
	width: 3rem;
	height: 0.4rem;
	line-height: 0.4rem;
	float: left;
	text-align: center;
	font-size: 0.36rem;
	margin-top: 0.3rem;
}
.htl-right {
	width: 2.2rem;
	height: 0.32rem;
	line-height: 0.32rem;
	float: right;
	text-align: center;
	font-size: 0.12rem;
}
.hde-right {
	width: 2.2rem;
	height: 0.32rem;
	line-height: 0.32rem;
	float: right;
	text-align: center;
	font-size: 0.12rem;
	color: red;
	margin-top: 0.3rem;
}
.hde-right > span {
	color: darkgray;
}
.house-detail {
	width: 6.7rem;
	height: 1.4rem;
	margin: auto;
	border-top: 1px solid #e8eaf2;
}
.ren-time {
	width: 3.2rem;
	height: 0.3rem;
	font-size: 0.22rem;
	color: #535c6f;
	margin-top: 0.15rem;
	float: right;
	margin-right: 3.3rem;
}
.many {
	width: 3rem;
	height: 1.15rem;
	margin: auto;
	text-align: center;
	line-height: 1.15rem;
	font-size: 0.12rem;
	color: #81a9fa;
}
.tel-box {
	width: 6.7rem;
	height: 1.4rem;
	margin: auto;
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
}
.tel-left {
	width: 2.8rem;
	height: ]0.75rem;
	float: left;
	font-size: 0.12rem;
	color: #838996;
	margin-top: 0.3rem;
}
.tel-left > p {
	font-size: 0.32rem;
	color: black;
}
.tel-right {
	width: 1.45rem;
	height: 0.6rem;
	float: right;
	border: 1px solid #4a84f8;
	border-radius: 0.3rem;
	margin-top: 0.3rem;
	text-align: center;
	line-height: 0.6rem;
	color: #4a84f8;
	font-size: 0.3rem;
}
.map-title {
	width: 6.7rem;
	height: 0.4rem;
	margin: auto;
	font-size: 0.36rem;
	margin-top: 0.45rem;
}
.map-box {
	width: 100%;
	height: 4.6rem;
	margin-top: 0.35rem;
}
.map-box > img {
	width: 100%;
	height: 100%;
}
.loca-one {
	width: 6.7rem;
	height: 0.4rem;
	font-size: 0.26rem;
	margin: auto;
	margin-top: 0.35rem;
}
.locaone-left {
	width: 4.8rem;
	height: 0.4rem;
	float: left;
}
.locaone-right {
	width: 0.25rem;
	height: 0.4rem;
	float: right;
}
.locaone-right > img {
	width: 100%;
	height: 100%;
}
.loca-two {
	width: 6.7rem;
	height: 0.35rem;
	font-size: 0.26rem;
	margin-top: 0.2rem;
	margin: auto;
	color: #858d9a;
}
.loca-two1 {
	width: 6.7rem;
	height: 0.35rem;
	font-size: 0.26rem;
	margin-top: 0.2rem;
	margin-left: 0.3rem;

	color: #858d9a;
}
.waring {
	width: 6.75rem;
	height: 0.3rem;
	margin: auto;
	margin-top: 0.8rem;
}
.waring-left {
	width: 4.5rem;
	height: 0.3rem;
	font-size: 0.2rem;
	color: #858d9a;
	line-height: 0.3rem;
	float: left;
}
.waring-left > img {
	width: 0.3rem;
	height: 0.3rem;
}
.waring-right {
	width: 1.6rem;
	height: 0.3rem;
	color: #007aff;
	float: right;
	font-size: 0.2rem;
}
.contact-box {
	width: 100%;
	height: 1.3rem;
	bottom: 0;
	z-index: 55;
	position: fixed;
	display: flex;
	justify-content: space-between;
	background: white;
}
.box {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 1.3rem;
}
.heart {
	width: 0.8rem;
	height: 0.75rem;
	font-size: 0.12rem;
	margin-top: 0.45rem;
}
.heart > img {
	width: 0.5rem;
	height: 0.4rem;
}
.zxzu {
	width: 2.42rem;
	height: 0.95rem;
	background: linear-gradient(30deg, #41cead, #2bb39e);
	border-radius: 0.2rem;
	text-align: center;
	line-height: 0.95rem;
	margin-top: 0.25rem;
	color: white;
}
.zxzu1 {
	width: 2.42rem;
	height: 0.95rem;
	background: linear-gradient(30deg, #6293f6, #316ce2);
	border-radius: 0.2rem;
	text-align: center;
	line-height: 0.95rem;
	margin-top: 0.25rem;
	color: white;
}
.news {
	width: 0.8rem;
	height: 0.7rem;
	border-radius: 50%;
	text-align: center;
	line-height: 1rem;
	position: fixed;
	top: 10rem;
	left: 6rem;
	background: white;
	z-index: 999;
}
.news > img {
	width: 0.5rem;
	height: 0.5rem;
}
.contact-box > div {
	float: left;
	margin-left: 0.2rem;
}
</style>
